<template>
    <div class="page-title">消息查询</div>
    <!-- <div class="tag-box">
        <el-check-tag class="type-tag" :checked="searchForm.type == '待处理消息'"
            @change="onChange('待处理消息')">待处理消息</el-check-tag>
        <el-check-tag class="type-tag" :checked="searchForm.type == '已处理消息'"
            @change="onChange('已处理消息')">已处理消息</el-check-tag>
        <el-check-tag class="type-tag" :checked="searchForm.type == '全部'" @change="onChange('全部')">全部</el-check-tag>
    </div> -->
    <el-form class="search-form" inline :model="searchForm">
        <div>
            <el-form-item class="search-form-item" label="消息类型:" >
                <el-select v-model="searchForm.typeCode" filterable clearable @change="changeState">
                    <el-option v-for="item in cardType_options" :key="item.code" :value="item.code" :label="item.title" />
                </el-select>
            </el-form-item>
            <el-form-item class="search-form-item" label="呼叫时间:">
                <el-date-picker v-model="searchForm.operDate" type="datetimerange"  start-placeholder="开始时间"
                    end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable/>
            </el-form-item>
            <!-- <el-form-item class="search-form-item" label="消息状态:">
                <el-select v-model="searchForm.typeCode" filterable clearable>
                    <el-option v-for="item in cardType_options" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
            </el-form-item>
            -->

            <el-form-item class="action-btn-box">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
            </el-form-item>
        </div>
    </el-form>
    <div class="table-box">
        <el-table :data="saveStore.msgList" stripe v-loading="loading">
            <el-table-column align="center" prop="content" label="消息类型" min-width="10%" />
            <el-table-column align="center" prop="roomName" label="消费桌台" min-width="10%" />
            <el-table-column align="center" prop="memberName" label="客户" min-width="10%" />
            <el-table-column align="center" prop="memberMobile" label="客户电话" min-width="10%" />
            <!-- <el-table-column align="center" prop="zsje" label="状态" min-width="10%">
                <template #default="scope">
                    <span class="color-FF6A00">{{ scope.row.zsje }}</span>
                </template>
            </el-table-column> -->
            <el-table-column align="center" prop="cruuentTime" label="呼叫时间" min-width="10%" />
            <!-- <el-table-column align="center" prop="" label="处理人" min-width="8%" />
            <el-table-column align="center" prop="" label="处理时间" min-width="8%" /> -->
            <el-table-column align="center" prop="" label="操作" min-width="12%" fixed="right">
                <template #default="scope">
                    <el-button class="action-btn" @click="handleDetail(scope.row)"> 处理</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- <div class="pagination-box">
        <el-pagination background layout="prev, pager, next,sizes, jumper, total" :total="total" :v-model="currentPage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:10px" />
    </div> -->
    <div class="orderRecords-container-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
            :total="saveStore.msgBackList.length">
        </el-pagination>
        <button class="footer-button">确定</button>
    </div>
</template>
  
<script setup>

import Api from '@/api'
import ls from '@/lib/ls'

import useSaveStore from '@/store/save'
import { closeWebSocket, initWebSocket, sendWebSocket } from '@/utils/websocket'
const saveStore = useSaveStore()

import { transformWorkTime } from '@/utils/chenhao.js' 
import useConfigStore from '@/store/config'  
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime  

// 获取会员卡类型OPTIONS
let cardType_options = ref([{
    title:'存酒服务',
    code:'002'
},{
    title:'呼叫服务',
    code:'001'
},{
    title:'全部',
    code:'000'
}])

onMounted(() => {
    // get_cardType_options()
    searchForm.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime)
})

const onChange = (params) => {
    searchForm.value.type = params
}

let loading = ref(false)
let searchForm = ref({
    type: '全部',
})

const state = ref('000')
// 状态改变
const changeState = (e)=>{
    console.log(e);
    state.value = e
}

// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.value = {}
    searchForm.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime)
    handleSearch()
}
// 查询表格数据
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)

let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    console.log(val);
    currentPage.value = val
    getTableData()
}


const getTableData = (flag) => {
    if(flag){
        currentPage.value = 1
    }
    if(!ls.get('MSG_LIST')){
        return
    }

    saveStore.msgBackList = ls.get('MSG_LIST')
    console.log(ls.get('MSG_LIST'));
    
    let filteredArray = ls.get('MSG_LIST')

    if(state.value == '002'){
        // 存酒服务
         filteredArray = saveStore.msgBackList.filter(obj => obj.memberMsgType == "002");
         console.log(filteredArray);
    }else if (state.value  == '001'){
        // 呼叫服务
         filteredArray = saveStore.msgBackList.filter(obj => obj.memberMsgType == "001");
    }
    console.log(filteredArray);

    let startIndex = (currentPage.value - 1) * pageSize.value;

    // 提取当前页的数据
    saveStore.msgList = filteredArray.slice(startIndex, startIndex + pageSize.value);

}
getTableData(true)

// 点击网上支付查询
const handleSearchPay = (params) => {

}
const USER_INFO = ls.get('USER_INFO')
const wsObj = ref({
  msgReceivePage:"",
  msgType: "callWaiterComplete",
  msgPlatform:"1",//0：后台 1：PC 2：H5  3：小程序
  msgContent:{
        messageId:"",
        orgCode:USER_INFO ? USER_INFO.orgCode : '',
  }
})

// 点击处理
const handleDetail = (params) => {
    console.log(params);
  
    Api.Common.PcObjProcess.Do({ "functionName": "DoCallRoom", "contentData": {roomCode:params.roomCode} })
    .then(res=>{
        console.log(res);
        console.log(saveStore.msgList);
        for (let i = saveStore.msgList.length - 1; i >= 0; i--) {
            if (saveStore.msgList[i].cruuentTime === params.cruuentTime) {
               
                saveStore.msgList.splice(i, 1);
            }
        }
        ls.set('MSG_LIST',saveStore.msgList)
    })
    // wsObj.value.msgContent.messageId = params.messageId
    // sendWebSocket(wsObj.value)
}

// 点击复台
const handleRe = (params) => {

}

</script>
  
<style scoped lang="scss">
@import '@/styles/com_style_input.css';
/* 在这里编写组件的CSS样式 */
// .app-container {}
.tag-box {
    margin-bottom: 20px;
    display: flex;


    .type-tag {
        margin-right: 20px;
        // padding: 20px 75px;
        width: 240px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #E6E6E6;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        border: 0;
    }
    
    ::v-deep {
        .type-tag {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .is-checked{
            background: #FFD400!important;
            color: #212121!important;
        }
    }
}

.search-form {
    width: 1520px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;

    // display: flex;
    .search-form-item {
        ::v-deep {
            .el-form-item__label {
                line-height: 40px;
            }

            .el-date-editor {
                width: 350px;

            }

            .el-input {
                width: 220px;
            }

            .el-input__wrapper {
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 220px;
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }
        }
    }

    .range-item {
        .el-input {
            width: 130px;
        }
    }

    .action-btn-box {
        float: right;

        button {
            width: 120px;
            height: 50px;
            line-height: 50px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1520px;

    .total-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
    }
    .el-table--fit {
         height: 400px;
  }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    margin-top: 20px;

    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}

.page-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    margin-bottom: 10px;
}
::v-deep .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
}

</style>
  